<template>
  <div id="nav">
    <van-nav-bar
      title="自动打卡"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-popover  placement="bottom-end" v-model:show="showPopover" :actions="actions" @select="onSelect">
          <template #reference>
            <van-icon name="ellipsis" size="18"/>
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
  </div>
  <router-view class="route-box"/>
</template>
<script>
export default {
  data(){
    return {
      showPopover: false,
      actions: [
        { text: '返回主页' , url: '/' },
        // { text: '添加用户' , url: '/adduser' },
        // { text: '添加位置' , url: '/addsite' },
        // { text: '用户列表' , url: '/userlist' },
        // { text: '位置列表' , url: '/sitelist' },
        { text: '关于我们' , url: '/about' }
      ],
      onSelect: (action)=>{
        this.$router.push(action.url)
      }
    }
  },
  methods:{
    onClickLeft(){
      history.back();
    },
  }
  
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  max-width: 600px;
  margin: auto;
}
body{
  background-color: #BEEDC7;
}
.route-box{
  margin: auto;
}
</style>
